<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">医院客户运营总览</h1>
    </div>

    <!-- 核心指标概览 -->
    <el-card class="core-metrics-card" shadow="never">
      <div slot="header" class="card-header">
        <div class="section-info">
          <h2 class="section-title">
            核心指标概览
            <el-tooltip content="展示数量均为去重后数量：每个医院、每个科室、每个医生、每个护士、每个患者只计算一次。较上月：同周期，去重后数量较上月数值增减的情况" placement="top">
              <i class="el-icon-question help-icon"></i>
            </el-tooltip>
          </h2>
        </div>
        <div class="update-info">
          <el-tag size="mini" type="info" class="update-tag" @click="refreshCoreMetrics">
            <i class="el-icon-refresh update-icon"></i>
            每日更新
          </el-tag>
          <span class="last-updated">更新于: {{ topFlashTime }}</span>
        </div>
      </div>

      <div class="core-metrics">
        <div class="metric-card" v-for="metric in coreMetrics" :key="metric.key">
          <div class="title">
            {{ metric.title }}
            <el-tooltip :content="metric.tooltip" placement="top">
              <i class="el-icon-question help-icon"></i>
            </el-tooltip>
          </div>
          <div class="hospital-display">
            <div class="main-value">
              <span class="activated-number">{{ metric.activated }}</span>
              <span class="separator" v-if="metric.total || metric.total == 0">/</span>
              <span class="total-number" v-if="metric.total || metric.total == 0">{{ metric.total }}</span>
            </div>
            <div class="value-description">
              <span class="activated-label">{{ metric.activatedLabel }}</span>
              <span class="total-label" v-if="metric.totalLabel">{{ metric.totalLabel }}</span>
            </div>
            <div class="activation-percentage" v-if="metric.percentage || metric.percentage == 0">
              <div class="percentage-bar">
                <div class="percentage-fill" :class="getPercentageClass(metric.percentage)"
                  :style="{ width: metric.percentage + '%' }"></div>
              </div>
              <span class="percentage-text">激活率 {{ metric.percentage }}%</span>
            </div>
          </div>
          <div class="trend" :class="metric.trendType">
            <span style="margin-left: 4px; color: #888;">{{ metric.trendLabel }}</span>
            <span>&nbsp;&nbsp;{{ (metric.trendValue > 0 ? '+' : '') + metric.trendValue }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 客户健康度总览 -->
    <el-card class="health-overview-card" shadow="never">
      <div slot="header" class="card-header">
        <div class="section-info">
          <h2 class="section-title">客户健康度总览</h2>
          <!-- <div class="update-time" v-if="updateTime">更新于: {{ updateTime }}</div> -->
          <div class="controls-container">
            <!-- <el-select v-model="healthFilter" placeholder="所有医院" size="small" style="width: 120px; margin-right: 10px;">
              <el-option label="所有医院" value="all"></el-option>
              <el-option label="激活医院" value="active"></el-option>
              <el-option label="未激活医院" value="inactive"></el-option>
            </el-select> -->
            <el-input v-model="searchKeyword" placeholder="搜索医院名称" size="small"
              style="width: 200px; margin-right: 10px;" @blur="searchHosp" @keyup.enter.native="searchHosp">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-dropdown @command="handleSortCommand" trigger="click">
              <el-button size="small">
                {{ currentSortText }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="doctorAll-desc">入驻医生（降序）</el-dropdown-item>
                <el-dropdown-item command="doctorAll-asc">入驻医生（升序）</el-dropdown-item>
                <el-dropdown-item command="nurseAll-desc">入驻护士（降序）</el-dropdown-item>
                <el-dropdown-item command="nurseAll-asc">入驻护士（升序）</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="update-info">
          <el-button type="primary" size="mini" @click="exportData">
            <i class="el-icon-download"></i> 导出数据
          </el-button>
          <el-tag size="mini" type="info" class="update-tag" @click="refreshHealthData">
            <i class="el-icon-refresh update-icon"></i>
            每半天更新
          </el-tag>
          <span class="last-updated">更新于: {{ updateTime }}</span>
        </div>
      </div>

      <!-- 医院健康度表格 -->
      <div class="table-container">
        <el-table :data="hospitalData" stripe style="width: 100%; min-width: 1200px; table-layout: fixed;"
          @sort-change="handleSortChange">
          <el-table-column prop="hospitalName" label="医院名称" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.hospitalName">
                <el-link type="primary" @click="viewHospitalDetail(scope.row)">
                  {{ scope.row.hospitalName }}
                  <i class="el-icon-top-right"></i>
                </el-link>
              </div>
              <div v-else>
                --
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="setTime" sortable="custom" label="入驻时间" width="150">
            <template slot-scope="scope">
              {{ scope.row.setTime }}
            </template>
          </el-table-column>

          <el-table-column prop="setDay" sortable="custom" label="入驻天数" width="150">
            <template slot-scope="scope">
              {{ scope.row.setDay }}
            </template>
          </el-table-column>

          <el-table-column label="激活科室（占比）" sortable="custom" width="210">
            <template slot-scope="scope">
              <div class="cell-metric">
                <div class="value">{{ scope.row.activateDept }} / {{ scope.row.deptAll }} ({{
                  scope.row.deptProportion }}%)</div>
                <div class="cell-bar-track">
                  <div class="cell-bar-fill" :class="getBarClass(scope.row.deptProportion)"
                    :style="{ width: scope.row.deptProportion + '%' }"></div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="激活成员（占比）" sortable="custom" width="210">
            <template slot-scope="scope">
              <div class="cell-metric">
                <div class="value">{{ scope.row.activateAccount }} / {{ scope.row.accountAll }} ({{
                  scope.row.accountProportion }}%)</div>
                <div class="cell-bar-track">
                  <div class="cell-bar-fill" :class="getBarClass(scope.row.accountProportion)"
                    :style="{ width: scope.row.accountProportion + '%' }"></div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="激活医生（占比）" sortable="custom" width="210">
            <template slot-scope="scope">
              <div class="cell-metric">
                <div class="value">{{ scope.row.activateDoctor }} / {{ scope.row.doctorAll }} ({{
                  scope.row.doctorProportion }}%)</div>
                <div class="cell-bar-track">
                  <div class="cell-bar-fill" :class="getBarClass(scope.row.doctorProportion)"
                    :style="{ width: scope.row.doctorProportion + '%' }"></div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="激活护士（占比）" sortable="custom" width="210">
            <template slot-scope="scope">
              <div class="cell-metric">
                <div class="value">{{ scope.row.activateNurse }} / {{ scope.row.nurseAll }} ({{
                  scope.row.nurseProportion }}%)</div>
                <div class="cell-bar-track">
                  <div class="cell-bar-fill" :class="getBarClass(scope.row.nurseProportion)"
                    :style="{ width: scope.row.nurseProportion + '%' }"></div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="remainingLicense" sortable="custom" label="剩余可用许可数" width="170">
            <template slot-scope="scope">
              <span
                :style="{ fontWeight: '700', color: scope.row.remainingLicense === '--' || !scope.row.remainingLicense ? '#333333' : getLicenseColor(scope.row.remainingLicense, scope.row.activateAccount) }">
                {{ scope.row.remainingLicense || '--' }}
              </span>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="licenseType" sortable="custom" label="接口许可采购类型" width="180">
            <template slot-scope="scope">
              <el-tag :type="scope.row.licenseType === 'hospital' ? 'success' : 'warning'" size="mini">
                {{ scope.row.licenseType === 'hospital' ? '医院采购' : '服务商采购' }}
              </el-tag>
            </template>
          </el-table-column> -->

          <el-table-column prop="customerNumber" sortable="custom" label="患者总数" width="130">
            <template slot-scope="scope">
              {{ scope.row.customerNumber ? scope.row.customerNumber.toLocaleString() : '0' }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pagination.currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCustomerOperationOne, getCustomerHealthDegree } from '@/api/chenlong.js'
import { download } from '@/utils/request'
export default {
  name: 'HospitalCustomerOverview', //医院客户运营总览
  data() {
    return {
      topFlashTime: '',
      updateTime: '',
      // 核心指标数据
      coreMetrics: [
        {
          key: 'hospitals',
          title: '入驻医院',
          tooltip: '有激活医护的医院/添加过应用的医院，同一家医院只能计算一次',
          activatedLabel: '激活医院',
          totalLabel: '医院总数',
          trendLabel: '激活较上月',
          trendType: 'zero',
          activated: 0,  // 已激活医院数  // activateHospital
          total: 0,     // 医院总数      //hospitalAll
          percentage: 0,   //医院 激活率   //hospitalActivationRate
          trendValue: '0'  // 医院激活较上月数值  //lastHospital
        },
        {
          key: 'departments',
          title: '覆盖科室',
          tooltip: '所有医院有激活医护的科室/所有医院的科室总数，同一家医院同一个科室只能计算一次',
          activatedLabel: '激活科室',
          totalLabel: '科室总数',
          trendLabel: '激活较上月',
          trendType: 'zero',
          percentage: 0,   // 科室激活率     // deptActivationRate
          activated: 0,   // 已激活科室数   //activateDept
          total: 0,       // 科室总数       //deptAll
          trendValue: '0'  // 科室激活较上月数值   //lastDept
        },
        {
          key: 'doctors',
          title: '管理医生',
          tooltip: '所有医院有激活的医生（占用接口许可的医生）/所有医院的医生总数，同一家医院同一个医生在多个科室，只能算作一个医生',
          trendType: 'zero',
          trendLabel: '激活较上月',
          activatedLabel: '激活医生',
          totalLabel: '医生总数',
          percentage: 0,   // 医生激活率     //doctorActivationRate
          activated: 0,    // 已激活医生数  //activateDoctor
          total: 0,      // 医生总数      ///doctorAll
          trendValue: '0'   // 医生激活较上月数值  //lastDoctor
        },
        {
          key: 'nurses',
          title: '协同护士',
          tooltip: '所有医院有激活的护士（占用接口许可的护士）/所有医院的护士总数，同一家医院同一个护士在多个科室，只能算作一个护士',
          activatedLabel: '激活护士',
          totalLabel: '护士总数',
          trendLabel: '激活较上月',
          trendType: 'zero',
          percentage: 0,   // 护士激活率     //nurseActivationRate
          activated: 0,  // 已激活护士数   //activateNurse
          total: 0,      // 护士总数         //nurseAll
          trendValue: '0'  // 护士激活较上月数值   //lastNurse
        },
        {
          key: 'patients',
          title: '服务患者',
          tooltip: '所有医院的患者总数，同一家医院同一个患者添加多名医护，只能算作一个患者',
          total: null,
          activatedLabel: '患者总数',
          totalLabel: null,
          percentage: null,
          trendType: 'zero',
          trendLabel: '较上月',
          activated: 0, // 患者总数   //customerNumber
          trendValue: '0' // 患者总数较上月数值   //lastCustomer
        }
      ],

      // 筛选和搜索
      healthFilter: 'active',
      searchKeyword: '',
      currentSort: 'doctorAll-desc',
      currentSortText: '请选择排序',

      // 医院数据
      hospitalData: [
        {
          hospitalName: '',
          setTime: '',
          setDay: 0,
          activateAccount: 0,
          deptAll: 0,
          deptProportion: 0,
          activateDoctor: 0,
          doctorAll: 0,
          doctorProportion: 0,
          activateNurse: 0,
          nurseAll: 0,
          nurseProportion: 0,
          accountAll: 0,
          accountProportion: 0,
          licenseUsed: 0,
          licenseTotal: 0,
          remainingLicense: 0,
          customerNumber: 0,
          licenseType: ''
        }
      ],

      // 分页信息
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      sorting: '',  //排序字段
      sortType: '',  //sortType排序方式 desc asc
      corpId: ''
    }
  },

  computed: {
  },
  mounted() {
    this.getTopServiceData()  //获取核心指标概览数据
    this.getCustomerHealthAll()  //获取客户健康度总览数据
  },
  methods: {

    async getTopServiceData(refreshData) {
      const params = {
        // 'corpId': this.corpId
      }
      if (refreshData) {
        params.refresh = refreshData
      }
      const res = await getCustomerOperationOne(params)
      if (res.code === 200) {
        //  this.coreMetrics = res.data.
        this.topFlashTime = res.data.updateTime  //更新时间
        //入驻医院
        this.coreMetrics[0].activated = res.data.activateHospital || 0   //已激活医院数
        this.coreMetrics[0].total = res.data.hospitalAll || 0   //医院总数
        this.coreMetrics[0].percentage = res.data.hospitalActivationRate || 0   //医院 激活率
        this.coreMetrics[0].trendValue = res.data.lastHospital || 0   //医院激活较上月数值
        this.coreMetrics[0].trendType = this.arrrowColor(res.data.lastHospital) //医院激活颜色
        //覆盖科室
        this.coreMetrics[1].activated = res.data.activateDept || 0   //已激活科室数
        this.coreMetrics[1].total = res.data.deptAll || 0   //科室总数
        this.coreMetrics[1].percentage = res.data.deptActivationRate || 0   //科室激活率
        this.coreMetrics[1].trendValue = res.data.lastDept || 0   //科室激活较上月数值
        this.coreMetrics[1].trendType = this.arrrowColor(res.data.lastDept) //科室激活较上月数值
        //管理医生
        this.coreMetrics[2].activated = res.data.activateDoctor || 0   //已激活医生数
        this.coreMetrics[2].total = res.data.doctorAll || 0   //医生总数
        this.coreMetrics[2].percentage = res.data.doctorActivationRate || 0   //医生激活率
        this.coreMetrics[2].trendValue = res.data.lastDoctor || 0   //医生激活较上月数值
        this.coreMetrics[2].trendType = this.arrrowColor(res.data.lastDoctor) //医生激活较上月数值
        //协同护士
        this.coreMetrics[3].activated = res.data.activateNurse || 0   // 已激活护士数
        this.coreMetrics[3].total = res.data.nurseAll || 0   //护士总数
        this.coreMetrics[3].percentage = res.data.nurseActivationRate || 0   //护士激活率
        this.coreMetrics[3].trendValue = res.data.lastNurse || 0   //护士激活较上月数值
        this.coreMetrics[3].trendType = this.arrrowColor(res.data.lastNurse) //护士激活较上月数值
        //患者总数
        this.coreMetrics[4].activated = res.data.customerNumber || 0   //患者总数
        this.coreMetrics[4].trendValue = res.data.lastCustomer || 0   //患者总数较上月数值
        this.coreMetrics[4].trendType = this.arrrowColor(res.data.lastCustomer) //患者总数较上月数值
        // this.coreMetrics[3].total = res.data.deptAll || 0   //科室总数
        // this.coreMetrics[3].percentage = res.data.deptActivationRate || 0   //科室激活率
      }
      this.$forceUpdate()
      //console.log(res)
    },
    async getCustomerHealthAll(refreshData) {
      //客户健康度总览   sorting排序字段 sortType排序方式 desc asc  降序：desc 升序：asc  corpName:医院名称
      const params = {
        'pageSize': this.pagination.pageSize,
        'pageNum': this.pagination.currentPage,
      }
      if (refreshData) {
        params.refresh = refreshData
      }
      if (this.searchKeyword) {
        params.corpName = this.searchKeyword
      }
      // 优先使用表头排序，如果没有则使用下拉菜单排序
      if (this.sorting && this.sortType) {
        params.sorting = this.sorting
        params.sortType = this.sortType
      } else if (this.currentSort) {
        const arr = this.currentSort.split('-')
        params.sorting = arr[0]
        params.sortType = arr[1]
      }
      const res = await getCustomerHealthDegree(params)
      if (res.code == 200) {
        this.pagination.total = res.data.total  //总页数
        // 更新表格数据
        this.hospitalData = res.data.list || []
        // 更新当前时间
        this.updateTime = this.formatCurrentTime()
        return true // 返回成功状态
      }
      this.$forceUpdate()
      // console.log('API调用参数:', params)
      // console.log('API响应:', res)
      return false // 返回失败状态
    },
    searchHosp() {
      this.pagination.currentPage = 1
      this.getCustomerHealthAll()  //搜索医院名称
    },
    arrrowColor(num = 0) {   //根据数值变化返回箭头颜色样式类
      if (num && Number(num) > 0) {
        return 'up'
      }
      if (num && Number(num) < 0) {
        return 'down'
      }
      if (num && Number(num) === 0) {
        return 'zero'
      }
    },

    // 格式化当前时间
    formatCurrentTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      return `${year}.${month}.${day} ${hours}:${minutes}`
    },
    // 获取百分比样式类
    getPercentageClass(percentage) {
      if (percentage >= 30) return 'high'
      if (percentage >= 10) return 'medium'
      return 'low'
    },

    // 获取条形图样式类
    getBarClass(percentage) {
      if (percentage >= 30) return 'high'
      if (percentage >= 10) return 'medium'
      return 'low'
    },

    // 获取许可证颜色
    getLicenseColor(remaining, activated) {
      if (activated > 0 && remaining / activated <= 0.1) {
        return '#f44336' // 红色警告
      }
      return '#333333' // 正常颜色
    },

    // 排序命令处理
    async handleSortCommand(command) {
      this.currentSort = command

      // 解析排序命令，设置sorting和sortType
      if (command) {
        const arr = command.split('-')
        this.sorting = arr[0]
        this.sortType = arr[1]
      } else {
        this.sorting = ''
        this.sortType = ''
      }

      const sortMap = {
        'doctorAll-desc': '入驻医生（降序）',
        'doctorAll-asc': '入驻医生（升序）',
        'nurseAll-desc': '入驻护士（降序）',
        'nurseAll-asc': '入驻护士（升序）'
      }

      this.currentSortText = sortMap[command] || '请选择排序'
      // 重置到第一页
      this.pagination.currentPage = 1

      // 重新获取数据
      try {
        const success = await this.getCustomerHealthAll()
        if (success) {
          this.$message.success('排序成功')
        } else {
          this.$message.error('排序失败，请重试')
        }
      } catch (error) {
        this.$message.error('排序失败，请重试')
      }
      console.log(">>>", this.currentSort, this.sorting, this.sortType);

    },

    // 查看医院详情
    viewHospitalDetail(row) {
      this.$message.info(`查看医院详情：${row.hospitalName}（建设中）`)
    },

    // 导出数据
    // async exportData() {
    //   try {
    //     const res = await exportCustomerHealthDegree()
    //     // 生成文件名：客户健康度明细_20250925
    //     const today = new Date()
    //     const year = today.getFullYear()
    //     const month = String(today.getMonth() + 1).padStart(2, '0')
    //     const day = String(today.getDate()).padStart(2, '0')
    //     const fileName = `客户健康度明细_${year}${month}${day}`

    //     // 使用框架自带的下载方法
    //     download(res.data, fileName, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
    //     this.$message.success('数据导出成功')

    //   } catch (error) {
    //     console.error('导出数据失败:', error)
    //     this.$message.error('数据导出失败')
    //   }
    // },
    exportData() {
      // 生成文件名：客户健康度明细_20250925
      const today = new Date()
      const year = today.getFullYear()
      const month = String(today.getMonth() + 1).padStart(2, '0')
      const day = String(today.getDate()).padStart(2, '0')
      const fileName = `客户健康度明细_${year}${month}${day}.xlsx`
      const params = {}
      if (this.searchKeyword) {
        params.corpName = this.searchKeyword
      }
      // 优先使用表头排序，如果没有则使用下拉菜单排序
      if (this.sorting && this.sortType) {
        params.sorting = this.sorting
        params.sortType = this.sortType
      }

      this.download('/business/data/statistics/exportCustomerHealthDegree', params, fileName)
    },


    // 刷新核心指标数据
    async refreshCoreMetrics() {
      //this.$message.info('正在刷新核心指标数据...')
      await this.getTopServiceData('refresh')
      this.$message.success('核心指标数据已更新')
    },

    // 客户刷新健康度数据
    async refreshHealthData() {
      // 这里可以添加实际的数据刷新逻辑
      // 例如调用API获取最新数据
      await this.getCustomerHealthAll('refresh')
      this.$message.success('客户健康度数据已更新')
    },

    // 分页大小改变
    handleSizeChange(val) {
      // 更新分页大小
      this.pagination.pageSize = val
      // 重置当前页码为1
      this.pagination.currentPage = 1
      this.getCustomerHealthAll()
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.getCustomerHealthAll()
      //console.log('当前页：' + val)
    },

    // 表格排序变化处理
    async handleSortChange({ column, prop, order }) {
      // console.log('排序变化:', { column, prop, order })

      if (order === null) {
        // 取消排序
        this.sorting = ''
        this.sortType = ''
        this.currentSort = ''
      } else {
        // 设置排序字段和排序方式
        // 对于没有prop的列，使用自定义映射
        const sortFieldMap = {
          '激活科室（占比）': 'deptProportion',
          '激活成员（占比）': 'accountProportion',
          '激活医生（占比）': 'doctorProportion',
          '激活护士（占比）': 'nurseProportion'
        }

        this.sorting = sortFieldMap[column.label] || prop
        this.sortType = order === 'ascending' ? 'asc' : 'desc'
        // console.log(">>>",this.sorting,this.sortType );
      }

      // 重置到第一页
      this.pagination.currentPage = 1

      // 重新获取数据
      try {
        const success = await this.getCustomerHealthAll()
        if (success) {
          this.$message.success('排序成功')
        } else {
          this.$message.error('排序失败，请重试')
        }
      } catch (error) {
        this.$message.error('排序失败，请重试')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f4f7fc;
  min-height: calc(100vh - 84px);
}

.page-header {
  margin-bottom: 20px;

  .page-title {
    font-size: 28px;
    font-weight: 600;
    color: #333333;
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 2px solid #4a90e2;
  }
}

.core-metrics-card,
.health-overview-card {
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-width: 0;
  flex-shrink: 0;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;

    .section-info {
      display: flex;
      align-items: center;
      gap: 16px;

      .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        margin: 0;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 6px;

        .help-icon {
          color: #888888;
          cursor: help;
          font-size: 14px;
        }
      }

      .update-time {
        font-size: 12px;
        color: #999999;
        margin-top: 4px;
        margin-left: 16px;
      }

      .controls-container {
        display: flex;
        align-items: center;
        gap: 10px;
      }
    }

    .update-info {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #888888;
      font-size: 12px;

      .update-tag {
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background-color: #409eff;
          color: #ffffff;
          transform: scale(1.05);
        }

        .update-icon {
          font-size: 12px;
        }
      }

      .last-updated {
        white-space: nowrap;
        font-size: 13px;
      }
    }
  }
}


.core-metrics {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 8px;

  .metric-card {
    background: #ffffff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    min-width: 220px;
    flex: 1;
    flex-shrink: 0;
    height: auto;

    .title {
      color: #888888;
      font-size: 15px;
      margin-bottom: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;

      .help-icon {
        color: #888888;
        cursor: help;
        font-size: 14px;
      }
    }

    .hospital-display {
      .main-value {
        display: flex;
        align-items: baseline;
        gap: 4px;
        margin-bottom: 8px;

        .activated-number {
          font-size: 32px;
          font-weight: bold;
          color: #4a90e2;
        }

        .separator {
          font-size: 28px;
          color: #888888;
        }

        .total-number {
          font-size: 28px;
          color: #888888;
        }
      }

      .value-description {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 14px;
        color: #888888;
      }

      .activation-percentage {
        .percentage-bar {
          width: 100%;
          height: 8px;
          background-color: #e9ecef;
          border-radius: 4px;
          overflow: hidden;
          margin-bottom: 4px;

          .percentage-fill {
            height: 100%;
            transition: width 0.5s ease-in-out;
            border-radius: 4px;

            &.high {
              background-color: #28a745;
            }

            &.medium {
              background-color: #fdab3d;
            }

            &.low {
              background-color: #dc3545;
            }
          }
        }

        .percentage-text {
          font-size: 14px;
          color: #888888;
        }
      }
    }

    .trend {
      display: flex;
      align-items: center;
      margin-top: 8px;
      font-size: 14px;
      color: #888888;

      &.up {
        color: #28a745;
      }

      &.down {
        color: #dc3545;
      }

      &.zero {
        color: #888888;
      }
    }
  }
}

.table-container {
  overflow-x: auto;
  width: 100%;
  min-width: 1200px;
  flex-shrink: 0;

  .el-table {
    min-width: 1200px !important;
    table-layout: fixed !important;

    ::v-deep .el-table__header-wrapper,
    ::v-deep .el-table__body-wrapper {
      min-width: 1200px !important;
    }

    ::v-deep .el-table__header th,
    ::v-deep .el-table__body td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.cell-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;

  .value {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
  }

  .cell-bar-track {
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;

    .cell-bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.3s ease;

      &.high {
        background-color: #28a745;
      }

      &.medium {
        background-color: #fdab3d;
      }

      &.low {
        background-color: #dc3545;
      }
    }
  }
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

// Element UI 样式覆盖
.el-card {
  border: 1px solid #e4e7ed;

  ::v-deep .el-card__header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e4e7ed;
    padding: 16px 20px;
  }

  ::v-deep .el-card__body {
    padding: 20px;
  }
}

.el-table {
  ::v-deep .el-table__header {
    th {
      background-color: #f8f9fa;
      color: #333333;
      font-weight: 600;
      font-size: 16px;
    }
  }

  ::v-deep .el-table__body {
    td {
      font-size: 16px;
    }

    tr:hover {
      background-color: #f1f3f5;
    }
  }
}

.el-link {
  font-weight: 600;
  font-size: 16px;

  .el-icon-top-right {
    font-size: 15px;
    margin-left: 4px;
  }
}

// 采购类型标签字号调整
::v-deep .el-tag--mini {
  font-size: 14px !important;
}

// 更新标签字号调整
.update-info {
  ::v-deep .el-tag--mini {
    font-size: 14px !important;
    padding: 8px 12px !important;
    height: auto !important;
    line-height: 1.4 !important;
  }
}

// 导出按钮字号调整
.update-info {
  ::v-deep .el-button--mini {
    font-size: 14px !important;
  }
}
</style>